import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { TabBar } from "antd-mobile";

import "./Index.css";
function Tabbar() {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const activeKey = pathname === "/" ? "/home3" : "/" + pathname.split("/")[1];
  // 病友圈相关页面切换中间悬浮按钮图标
  const inSickCircle =
    pathname.startsWith("/class") || pathname.startsWith("/bingydetail");
  const fabIcon = inSickCircle ? "/edit.png" : "/xin.png";
  // 与 /home 对齐的尺寸；若在 /class 需要更小，按这里调整
  const fabSize = inSickCircle ? 56 : 64;
  const iconSize = inSickCircle ? 44 : 56;
  const fabBottom = 34;
  const handleFabClick = () => {
    if (pathname.startsWith("/class")) {
      navigate("/bingye");
    } else {
      navigate("/class");
    }
  };
  const tab = [
    {
      key: "/home",
      title: "",
      icon: <img className="tab-icon" src={"/fangg.png"} />,
      activeIcon: <img className="tab-icon" src={"/fangg.png"} />,
    },

    {
      key: "/video",
      title: "",
      icon: <img className="tab-icon" src={"/video.png"} />,
      activeIcon: <img className="tab-icon" src={"/video.png"} />,
    },
  ];
  return (
    <div>
      <div
        className="tab-fab"
        style={{ width: fabSize, height: fabSize, bottom: fabBottom }}
      >
        <img
          className="tab-fab-icon"
          style={{ width: iconSize, height: iconSize }}
          src={fabIcon}
          onClick={handleFabClick}
        />
      </div>
      <TabBar
        activeKey={activeKey}
        onChange={(key) => navigate(key)}
        className="tab"
      >
        {tab.map((item) => (
          <TabBar.Item
            key={item.key}
            title={item.title}
            icon={(active) => (active ? item.activeIcon : item.icon)}
          />
        ))}
      </TabBar>
    </div>
  );
}

export default Tabbar;
